<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: grey;
        }
        @media screen and (max-width: 960px) {
            body {
                background-color: red;
            } }
        @media screen and (max-width: 768px) {
            body {
                background-color: orange;
            }
        }
        @media screen and (max-width: 550px) {
            body {
                background-color: yellow;
            } }
        @media screen and (max-width: 320px) {
            body {
                background-color: green;
            }
        }

    </style>
</head>
<body>
<header>
    <nav>
        <ul id="nav-list">
            <li><a href="javascript:void(0)" title="Home">Home</a></li>
            <li><a href="#" title="About">About</a></li>
        </ul> </nav>
</header>

<script>
    (_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()


</script>
</body>
</html>
